<template>
    <view>
        <view class="uni-padding-wrap">
            <!-- 评论区 start -->
            <view class="uni-comment">
                <view class="uni-comment-list">
                    <view class="uni-comment-body">
                        <view class="uni-comment-top" style="text-align: right;">
                            <text>自己</text>
                        </view>
                        <view class="uni-comment-content" style="text-align: right;">
							{{data.contacts}}
							<view class="use-upload dflex dflex-wrap-w" style="justify-content: end;">
								<view class="item pos-r" v-for="(item, index) in data.imgs" @click="preImage(item)" :key="index">
									<!-- <video v-if="item.type.indexOf('video/') !== -1" :src="item.url"></video> -->
									<image  :src="item" mode="aspectFill"></image>
								</view>
							</view>
						</view>
                    </view>
					<view class="uni-comment-face">
					    <image :src="userInfo.avatar || 'https://img.shihuashengyi.cn/static/images/user/default.png'" mode="widthFix"></image>
					</view>
                </view>
                <view class="uni-comment-list" v-if="data.reply">
                    <view class="uni-comment-face">
                        <image src="https://img.shihuashengyi.cn/static/images/user/default.png" mode="widthFix"></image>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>管理员回复：</text>
                        </view>
                        <view class="uni-comment-date">
                            <text>{{data.replyTime}}</text>
                        </view>
                        <view class="uni-comment-content">{{data.reply}}</view>
                    </view>
                </view>
				<view class="uni-comment-list" v-else>
                    <view class="uni-comment-face">
                        <image src="https://img.shihuashengyi.cn/static/images/user/default.png" mode="widthFix"></image>
                    </view>
                    <view class="uni-comment-body">
                        <view class="uni-comment-top">
                            <text>管理员暂未回复：</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import {feed_back_detail} from "@/js_sdk/apis/user.js"
    export default {
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			}
		},
        data() {
            return {
                title: "评论界面",
				data:{}
            }
        },
		onLoad({id}) {
			feed_back_detail({id}).then(res=>{
				this.data=res.data
				if(res.data.imgs.length>0){
					this.data.imgs=this.data.imgs.split(",")
				}else{
					this.data.imgs=[]
				}
				uni.setNavigationBarTitle({
					title:res.data.title+"(问题详情)"
				})
			})
		},
		methods:{
			preImage(item, urls) {
				uni.previewImage({
					current: item,
					urls: data.imgs.split(","),
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
    }
</script>

<style lang="scss">
	.use-upload {
		.item {
			width: 23%;
			margin-right: 2%;
			height: 150rpx;
			border: 1px solid #f0f0f0;
	
			image, video {
				width: 100%;
				height: 100%;
			}
		}
	
		.del {
			top: -30rpx;
			right: -10rpx;
			width: 50rpx;
			height: 50rpx;
			z-index: 99;
			box-shadow: 0px 3px 5px #f0f0f0;
		}
	}
    /* comment */
    page {
        background-color: #f8f8f8;
    }

    .uni-padding-wrap {
        padding: 30upx;
    }

    view {
        font-size: 28upx;
    }

    .uni-comment {
        padding: 5rpx 0;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
    }

    .uni-comment-list {
        flex-wrap: nowrap;
        padding: 10rpx 0;
        margin: 10rpx 0;
        width: 100%;
        display: flex;
    }

    .uni-comment-face {
        width: 70upx;
        height: 70upx;
        border-radius: 100%;
        margin-right: 20upx;
        flex-shrink: 0;
        overflow: hidden;
    }

    .uni-comment-face image {
        width: 100%;
        border-radius: 100%;
    }

    .uni-comment-body {
        width: 100%;
    }

    .uni-comment-top {
        line-height: 1.5em;
        justify-content: space-between;
    }

    .uni-comment-top text {
        color: #0A98D5;
        font-size: 24upx;
    }

    .uni-comment-date {
        line-height: 38upx;
        flex-direction: row;
        justify-content: space-between;
        display: flex !important;
        flex-grow: 1;
    }

    .uni-comment-date view {
        color: #666666;
        font-size: 24upx;
        line-height: 38upx;
    }

    .uni-comment-content {
        line-height: 1.6em;
        font-size: 28upx;
        padding: 8rpx 0;
    }

    .uni-comment-replay-btn {
        background: #FFF;
        font-size: 24upx;
        line-height: 28upx;
        padding: 5rpx 20upx;
        border-radius: 30upx;
        color: #333 !important;
        margin: 0 10upx;
    }
</style>
